<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../image/pic.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="header.html">
    <link rel="stylesheet" href="footer.html">
    <script>
        let username = sessionStorage.getItem("username");    
        if(!username){
            location.href = "http://127.0.0.1:82/html/signin.html";
        }     
    </script>
    <title>首页</title>
    <style>
        iframe{
            display: block;
            width: 100%;
            height: 183px;
        }
        .top .sign ul li a{
            cursor: pointer;
        }
        .nav2{position: sticky;top: 0;margin:20px 0 0 1320px;}
        .nav2 ul{text-align: center; height: 200px;width: 50px;font-size: 13px;color: #666;border: 1px solid #e3e3e3;}
        .nav2 ul li+li{border-top: 1px solid #e3e3e3;}
        .nav2 ul li{width: 50px;height: 50px;line-height: 50px;}
        .buy a:hover{background-color: rgb(235, 230, 230);color: rgb(231, 10, 10);}
        .lunbotu{width: 100%;height: 403px;position: relative;}
        .lunbotu ul li{display: none; }
        .lunbotu ul li img{width: 100%; position: absolute;top: 0;left: 0;}
        .increate{width: 60px;height: 20px; position: absolute;bottom: 20%;left: 50%;transform: translateX(-50%);}
        .create{width: 10px;height: 10px;border-radius: 50%;background-color:rgba(0, 0, 0, 0.5);display: inline-block;margin-left: 10px;}
        #prev,#next{
			position:absolute;
			top:30%;
			cursor:pointer;
			opacity:.7;
			transition:all .5s;
		}
		#prev:hover,#next:hover{
			transform: scale(1.1);
			opacity:1;
		}
		#prev{
			left:50px;
		}
		#next{
			right:50px;
		}
        .show{display:block !important;}
        .animation{
            height: 45px;
            width: 100%;
            background:rgba(0, 0, 0, 0.5);
            position: absolute;bottom: 0;left: 0;
        }
        .bodys{width: 1090px;margin: 0 auto;}
        .main1{width: 542px;height: 541px;display: flex;flex-wrap: wrap;}
        .main1 .one{width: 268px;height: 270px;display: flex;justify-content: space-around;align-items: center; flex-direction: column;border: 1px solid #e3e3e3;}
        .main1 h3{font-weight: 500;font-size: 22px;color: #666;}
        .main1 p{color: #999;}
        .oneth h4{height: 60px;font-weight: 500;font-size: 20px;color: #666;line-height: 60px;border-bottom: 1px solid #e3e3e3;border-right: 1px solid #e3e3e3;}
        .onethon{width: 210px;height: 120px;border-bottom: 1px solid #e3e3e3;border-right: 1px solid #e3e3e3;}
        .onethon img{margin-top: 10%;}
        .onethon h6{width: 55%;height: 100%;}
        .onethon h6 p:nth-child(1){font-size: 12px;color: #999;margin-top: 25px;}
        .onethon h6 p:nth-child(2){font-size: 22px;color:rgb(180, 0, 0);margin: 10px;}
        .onethon h6 p:nth-child(2) span{color: #999;font-size: 14px;}
        #change{background-color: #fff;}
    </style>
</head>
<body>
    <header>
        <div class="top">
            <div class="sign">
                <ul>
                    <li>考拉欢迎你！</li>
                    <li>
                        <a href="#">登录</a>
                    </li>
                    <li>
                        <a href="#">注册</a>
                    </li>
                    <li>手机考拉</li>
                </ul>
            </div>
            <div class="nav r">
                <ul>
                    <li>每日签到</li>
                    <li>我的订单</li>
                    <li>个人中心</li>
                    <li>客户服务</li>
                    <li>充值中心</li>
                    <li>消费者权益</li>
                    <li>更多</li>
                    <li>视频内容</li>
                </ul>
            </div>
        </div>
    </header>
    <section>
        <div class="main">
            <img src="../image/logo.png" alt="" class="l">
            <div class="checks l">   
                <h1>
                    <input type="text" class="sou" placeholder="搜索一下">
                    <p class="r tu"></p>
                </h1>
            </div>
            <div class="buy r">
                <a href="#">购物车</a>
            </div>
        </div>
    </section>
    <footer>
        <div class="foot">
            <h2 class="l">所有分类</h2>
            <ul class="l">
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">海外直购</a>
                </li>
                <li>
                    <a href="">品质奶粉</a>

                </li>
                <li>
                    <a href="list.html">人气面膜</a>
                </li>
                <li>
                    <a href="">充值</a>
                </li>
            </ul>
        </div>
    </footer>
    <!-- 轮播图 -->
    <div class="lunbotu">
        <ul>
            <li class="show">
                <img src="../image/lun1.jpg" alt="">        
            </li>
            <li>
                <img src="../image/lun2.png" alt="">
            </li>
        </ul>
        <img src="../image/l.png" alt="" id="prev">
        <img src="../image/r.png" alt="" id="next">
        <div class="increate"></div>
        <div class="animation">

        </div>
    </div>
    <div class="bodys">
        <img src="../image/index1.jpg" alt="" class="l">
        <div class="main1 l">
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
        </div>
        <div class="oneth l">
            <h4>最新热卖</h4>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>    
        </div>
    </div>
    <div class="bodys">
        <img src="../image/index1.jpg" alt="" class="l">
        <div class="main1 l">
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
        </div>
        <div class="oneth l">
            <h4>最新热卖</h4>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>    
        </div>
    </div>
    <div class="bodys">
        <img src="../image/index1.jpg" alt="" class="l">
        <div class="main1 l">
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
        </div>
        <div class="oneth l">
            <h4>最新热卖</h4>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>    
        </div>
    </div>
    <div class="bodys">
        <img src="../image/index1.jpg" alt="" class="l">
        <div class="main1 l">
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
            <div class="one">
                <h3>超强护法装备</h3>
                <p>吕洗发水超值人选中</p>
                <div>
                    <img src="../image/one.1.jpg" alt="">
                </div>    
            </div>
        </div>
        <div class="oneth l">
            <h4>最新热卖</h4>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>
            <div class="onethon">
                <img class="l" src="../image/oneth1.jpg" alt="">
                <h6 class="l">
                    <p>LCUAS'PAPAW卢卡斯 神奇番木瓜万用膏</p>
                    <p>￥56 <span><del>￥99</del> </span></p>
                </h6>
            </div>    
        </div>
    </div>
    <div class="nav2">
        <ul>
            <li>签到</li>
            <li>购物车</li>
            <li>APP</li>
            <li>TOP</li>
        </ul>
    </div>
    <img src="../image/foot.jpg" style="width: 100%;" alt="">
    <iframe src="footer.html" frameborder="no" scrolling="no"></iframe>

    <script src="../js/jquery.min.js"></script>
    <script>
            let index = 0;
            let liList = document.querySelectorAll(".lunbotu ul li")
            let odiv = document.getElementsByClassName("lunbotu")[0];
            //动态创建小圆点
            let oincreate = document.getElementsByClassName("increate")[0];
            for (var i = 0; i < liList.length; i++) {
                var op = document.createElement("p");
                op.className = "create";
                op.id = "change";
                oincreate.appendChild(op); 
            }
            var opp = document.getElementsByClassName("create"); 
           
            // 左右按钮函数
            function rightAndleft (){
                for(var i = 0; i < liList.length;i++){
                    liList[i].className = "";
                    opp[i].style.background = "white"
                }
                liList[index].className = "show";
                opp[index].style.background = "green";
            }

            next.onclick = function(){
                if(index === liList.length - 1){
                    index = 0;
                }
                else{
                    index++;
                }
                rightAndleft();
            }
            prev.onclick = function(){
                if(index === 0){
                    index = liList.length - 1;
                }
                else{
                    index--;
                }
                rightAndleft()
            }
            let times = setInterval(function(){
                next.click();
		    },3000)
            
           
            $(".sou").keyup(function(event){
                if(event.keyCode===13){
                    location.href = `http://127.0.0.1:82/html/list.html`
                    $(".sou").val("");
                }
            })

            //登录注册及购物车的跳转
            $(".buy a").click(function(){
                location.href = "http://127.0.0.1:82/html/shopping.html"
            })
            $(".sign ul li:nth-child(2)").click(function(){
                location.href = `http://127.0.0.1:82/html/signin.html`
            })
            $(".sign ul li:nth-child(3)").click(function(){
                location.href = `http://127.0.0.1:82/html/signin.html`
            })
    </script>
</body>
</html>
<!-- 
    黏性定位
 -->